<template>
	<view>
		<!-- #ifdef H5 -->
		<!-- <Tabbar :current="'0'"></Tabbar> -->
		<!-- #endif -->
		<navbar></navbar>
		<view v-if="!canIUseTrade" class="yoshop-notcont yoshop-notcont-unopen">
			<image src="@/static/logo.png" mode=""></image>
			<view class="cont">寄售市场升级维护中</view>
		</view>
		<template v-else>
			
			<view class="container">
				<view class="container_top">
					<!-- <view class="dis-flex flex-x-between search_box">
						<view class="btn-search dis-flex flex-center" @tap.stop.prevent="onGotoSearch">
							<text class="iconfont icon-sousuo"></text>
							<text class="m-left10 f-22">输入藏品进行搜索</text>
						</view>
					</view> -->
					<view class="dis-flex flex-x-between search_box">
						<view class="btn-search dis-flex flex-center">
							数字藏品
						</view>
					</view>
					<!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="scrollValue">
						<view class="scroll-view-item_H" v-for="(item, index) in goodsClass" :key="index" 
						:class="'screen-class ' + (index == goodsClassIndex ? 'seleceActive ' : '')"
						@tap="getCollectList(item.category_id,index)">
							{{ item.name }}
						</view>
					</scroll-view> -->
				</view>
				
				<view class="container-main">
					<!-- 分类 -->
					<uni-drawer ref="showRight" mode="right" :mask-click="true" :width='350'>
						<scroll-view style=" height: 100%;background-color: #fff;" scroll-y="true">
							<!-- <button @click="closeDrawer" type="primary">关闭Drawer</button> -->
							<view class="xilie">
								<!-- <view class="dy-iconfont icon-game f-40"></view> -->
								<img class="selectimg" src="https://qiniu.wiod.cn/alc%2F%E7%AD%9B%E9%80%89%20(1).png" alt="">
								<view style="margin-left: 10rpx;color:#000">筛选</view>
							</view>
							<view class="sc_screen">
								<!-- 分类 选择系列-->
								<view v-for="(item, index) in goodsClass" :key="index"
								:class="'screen-class2 ' + (index == goodsClassIndex ? 'seleceActive2 ' : '')"
								@tap="getCollectList(item.category_id,index)">
									<view class="screen-text" v-if="item.name > 6">
										{{ item.name }}
									</view>
									<view class="" v-else>
										{{ item.name }}
									</view>
									
								</view>
							</view>
						</scroll-view>
					</uni-drawer>
					
					<!-- 市场列表 -->
					<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="isRefreshing" @scroll="assetScroll" @refresherpulling="refresh" @scrolltolower="loadMore" class="assets-list">
						<view v-for="item in collectList" :key="item.menu_id" class="assets"
							@tap.stop.prevent="onAssetsTaped(item.name)">
							<view class="star_level">
								<!-- {{item.star_level}} -->
								<view v-for="items in item.star_level" class="star_level_img">
									<svg t="1680423148831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2996" width="16" height="16"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#F2CB51" p-id="2997"></path></svg>
								</view>
							</view>
							<view class="assets__img-wrapper">
								<easy-loadimage class="assets__img_out sale_out" mode="aspectFill" image-src="https://img.btcys.com/btcys/20230415225657b47540955.png"
									:scroll-top="scrollTop" borderRadius="10rpx 10rpx 0 0 " v-if="item.is_sell_out"></easy-loadimage>
								<easy-loadimage class="assets__img" mode="aspectFill" :image-src="item.image_url"
									:scroll-top="scrollTop" borderRadius="10rpx 10rpx 0 0 "></easy-loadimage>
								<view style="display: flex;position:absolute;bottom: 0;left:50%;transform: translateX(-50%);">
									<view style="background: #FBC16D;width: 200rpx;text-align: center;height: 50rpx;font-weight: bold;font-size: 26rpx;line-height: 50rpx;border-top-left-radius: 10px;border-top-right-radius: 10px;box-shadow: 4px -6px 5px 3px rgba(0, 0, 0, 0.3);">流通: {{ item.market_num }}份</view>
								</view>
							</view>
							<img class="bg_image" src="http://img.btcys.com/btcys/2023040913431094eb92544.png" alt="">
							<view class="assets-info b-f">
								<view class="onelist-hidden--s coll_title">{{ item.name }}</view>
								<view style="height: 30px;" v-if="item.is_blind_box&&!item.open_blind_box_status">
								</view>
								<view class="dis-flex m-top20 f-22" v-else style="justify-content: space-between">
									<view style="display: flex;">
										<view class="assets__no-title col-f">发行</view>
										<view class="assets__no-wrapper">
											<!-- <text>{{ item.sort_no }}</text>/{{ item.total_sort_no }} -->
											<text>{{ item.total_num }}</text>
										</view>
									</view>
								</view>
								<view class="dis-flex flex-x-end flex-y-center">
									<view class="dis-flex flex-x-between flex-y-center m-top20 ">
										<view class="">
											￥
										</view>
										<view class="assets__price">
											{{ item.sale_price }}起
										</view>
										
										<!-- <view class="dy-iconfont icon-qianjin"></view> -->
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-if="!assets.loading && 0 == collectList.length" class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<view class="cont">市场上还没有藏品</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	import easyLoadimage from "@/components/easy-loadimage/easy-loadimage";
	import {
		canIUseTrade
	} from '@/module.js';
	export default {
		components: {
			navbar,
			easyLoadimage,
		},
		data() {
			return {
				isRefreshing: false,
				fitst: true,
				scrollValue: 0,
				category_id: 0,
				collectList: [],
				times: null,
				topTabName: '',
				isTabFixed: false,
				seletIndex: -1,
				serachIndex: 0,
				goodsClassIndex: 0,
				search: '',
				searchList: [],
				// 分类
				goodsClass: [
				],
				// 全部里面的单品需要在这里配置
				good: [],
				shGoodsName: [],
				shGoodsModel: [],
				canIUseTrade: canIUseTrade,
				sort: {
					options: [{
						title: '时间排序',
						order_by: 'create_time',
						sort_by: 'desc', // 升序：asc,降序：desc
					}, {
						title: '价格排序',
						order_by: 'sale_price',
						sort_by: 'asc', // 升序：asc,降序：desc
					}],
					current: 0, // 价格和时间排序二选一
				},
				assets: {
					page: 1,
					loading: false,
					hasMore: false,
					list: []
				},
				scrollTop: 0,
			}
		},
		onLoad: function() {
			this.GetserachList()
			this.getCollectList(1,0)
		},
		onShow() {
			// this.GetserachList()
		},
		// onPullDownRefresh() {
		// 	this.GetserachList()
			
		// 	this.shGoodsName = []
		// 	this.requestData(() => {
		// 		uni.stopPullDownRefresh();
		// 	});
		// 	this.getCollectList(this.goodsClass[0].category_id,0)
		// },
		// onReachBottom() {
		// 	if (this.assets.hasMore && !this.assets.loading) {
		// 		this.requestData();
		// 	}
		// },
		// onPageScroll(e) {
		// 	if (e.scrollTop > uni.upx2px(60) + 10) { //60搜索框高度+10父级内边距
		// 		this.isTabFixed = true
		// 	} else {
		// 		this.isTabFixed = false
		// 	}
		// },
		beforeDestroy() {
			clearTimeout(this.times)
		},
		methods: {
			assetScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			refresh() {
				let _this = this
				_this.isRefreshing = true
				this.GetserachList()
				
				this.shGoodsName = []
				this.requestData(() => {
					_this.isRefreshing = false
				});
				this.getCollectList(this.goodsClass[0].category_id,0)
			},
			loadMore() {
				if (this.assets.hasMore && !this.assets.loading) {
					this.requestData();
				}
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				this.scrollValue = e.detail.scrollLeft
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 单击分类获取具体藏品
			getCollectList(category_id, index) {
				this.closeDrawer()
				// if (this.category_id != category_id) {
					this.category_id = category_id
					app._get('page/getCollect', {
						category_id
					}, (res) => {
						// this.goodsClass = res.data
						this.collectList = res.data
					}, null, () => {

					})
					this.serachClass(1, index)
					uni.pageScrollTo({
						scrollTop: -10,
						duration: 1
					})
				// }
			},
			//筛选列表
			GetserachList() {
				app._get('page/getClassify', {}, (res) => {
					this.goodsClass = res.data
					if(this.fitst){
						this.getCollectList(res.data[0].category_id,0)
						this.fitst = false
					}else{
						this.getCollectList(this.category_id,0)
					}
				}, null, () => {

				})
			},
			// 筛选分类
			serachClass(name, index) {
				this.shGoodsName = []
				this.seletIndex = -1
				this.goodsIndex = -1
				this.modelIndex = -1
				this.serachIndex = index
				if (this.goodsClassIndex != index) {
					this.goodsClassIndex = index
					this.shGoodsModel = this.searchList[index]
				}
			},
			requestData(callback) {
				this.assets.loading = true;
				uni.showLoading();
				let {
					order_by,
					sort_by,
				} = this.sort.options[this.sort.current];
				app._get('ordersale/salelists', {
					page: this.assets.page,
					order_by,
					sort_by,
					search: this.search
				}, (res) => {
					let {
						data,
						total
					} = res.data;
					let {
						page,
						list,
						hasMore
					} = this.assets;
					if (1 == page) {
						list.length = 0;
					}
					list = [...list, ...data];
					hasMore = total > list.length;
					if (hasMore) {
						page++;
					}
					this.assets.page = page;
					this.assets.list = list;
					this.assets.hasMore = hasMore;

				}, null, () => {
					this.assets.loading = false;
					uni.hideLoading();
					callback && callback();
				})
			},

			// 点击排序
			onSortAssets: function(index) {
				/**
				 * 1、已选中的切换升降序
				 * 2、未选中的先选中，再次点击时才切换升降序
				 */
				if (this.times) {
					clearTimeout(this.times)
				}
				this.times = setTimeout(() => {
					if (this.sort.current != index) {
						this.sort.current = index;
						this.assets.page = 1;
						this.assets.list = []
						this.requestData();
					} else {
						let option = this.sort.options[index];
						option.sort_by = (option.sort_by == 'asc') ? 'desc' : 'asc';
						this.assets.page = 1;
						this.assets.list = []
						this.requestData();
					}
				}, 200)

			},

			// 查看藏品详情
			onAssetsTaped: function(name) {
				app.navigationTo(`pages/market/list/list?name=${name}`)
			},

			// 去搜索
			onGotoSearch: function(e) {
				uni.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";

	.yoshop-notcont-unopen {
		padding-top: 360rpx;
		text-align: center;
	}

	.yoshop-notcont-unopen image {
		width: 150rpx;
		height: 150rpx;
	}

	.yoshop-notcont-unopen .cont {
		margin-top: 40rpx;
		color: #BCBCBC;
	}

	.sort-screen {
		margin-left: 40rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.sort-all {
		height: 100rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		color: $uni-text-color-grey;
		position: relative;
	}

	.sc_screen {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
		padding: 0 30rpx;
	}

	.xilie {
		display: flex;
		flex-direction: row;
		font-size: 30rpx;
		padding: 20rpx 0 0 25rpx;
	}

	// 分类样式
	.screen-class {
		border-radius: 10rpx;
		font-size: 28rpx;
		text-align: center;
		color: $uni-text-color-grey;
		width: 152rpx;
		// background-color: #e6e6e6;
		padding: 14rpx;
		margin: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		/* 文字不折行 */
	}

	.screen {
		border-radius: 10rpx;
		font-size: 28rpx;
		text-align: center;
		color: #5b5b5a;
		width: 152rpx;
		// border-radius: 20rpx;
		background-color: #e6e6e6;
		padding: 14rpx;
		margin: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		/* 文字不折行 */

	}

	.screen-text {
		animation: move 3s linear infinite;
		// overflow: hidden;
	}

	@keyframes move {
		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(-50%);
		}

		100% {
			transform: translateX(0%);
		}
	}
	// 分类样式
	.screen-class {
		border-radius: 10rpx;
		font-size: 28rpx;
		text-align: center;
		color: #bfbfbf;
		width: 152rpx;
		// background-color: #e6e6e6;
		padding: 14rpx;
		margin: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		/* 文字不折行 */
	}
	.seleceActive {
		// background-color: #E7F3FF;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		// font-size: 28rpx;
		// text-align: center;
		// width: 160rpx;
		// border-radius: 30rpx;
		// padding: 10rpx;
		// margin: 10rpx;
	}

	.paying {
		position: absolute;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		// padding: 10rpx;
		// border-radius: 10rpx 0 30rpx 0;
	}

	.container{
		height: calc(100vh - 50px);
		overflow: hidden;
	}


	.container .fixed {
		// position: fixed;
		// left: 10px;
		// right: 0;
		// top: 0;
		// background: $uni-bg-color;
		// z-index: 9;
	}

	.selectimg {
		width: 28rpx;
		height: 28rpx;
		margin-left: 6rpx;
	}

	.scroll-view_H {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		white-space: nowrap;
		background:linear-gradient(90deg,#555555,#000000);
		border-bottom: 1px solid #eee;
		// position: fixed;
		z-index: 9;
	}
	.scroll-view-item_H {
		display: inline;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
	}
	// 分类样式
	.screen-class2 {
		border-radius: 10rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
		width: 152rpx;
		background-color: #e6e6e6;
		padding: 14rpx;
		margin: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		/* 文字不折行 */
	}
	.seleceActive2 {
		background-color: #E7F3FF;
		color: #D7B059;
		// font-size: 28rpx;
		// text-align: center;
		// width: 160rpx;
		// border-radius: 30rpx;
		// padding: 10rpx;
		// margin: 10rpx;
	}
	.star_level{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		z-index: 9;
		left: 50%; 
		transform: translateX(-50%);
		background-color: #000;
		width: 300rpx;
		opacity: 0.6;
		border-radius: 0 0 50rpx 50rpx;
		color: #D7B059;
	}
	.bg_image{
		position: absolute;
		width: 50%;
		right: 0;
		opacity: 0.2;
	}
	.coll_title{
		font-size: 34rpx;
		font-weight: 600;
	}
	.search_box{
		padding: 10rpx;
	}
	.container_top{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		background:linear-gradient(90deg,#ffa570,#f9782d);
	}
	.sale_out{
		position: absolute;
		z-index: 9999;
	}
	.assets__img_out{
		width: 60%;
		height: 60%;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
</style>
